<!--
 * @Author: liuyonghu
 * @Date: 2021-10-26 17:48:23
 * @LastEditTime: 2021-10-26 18:20:50
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/1.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .warpper {
            height: 100%;
            background: orange;
            color: white;
        }
    </style>
</head>

<body>

    <div id="app" style="width: 900px; height: 900px">
        {{message}}
        <my-form :data="user">

        </my-form>

        <button @click="submitFunction">submit</button>
    </div>
    <script type="text/x-template" id="my-template">
        <form >
            First name: <input type="text" name="fname" v-model="data.firstName"><br>
            Last name: <input type="text" name="lname"  v-model="data.lastName"><br>
          
          </form>
    </script>
    <script>
        window.onload = () => {
            console.log(' vue - \n ', Vue);

            var app = Vue.createApp({
                data() {
                    return {
                        message: '123',
                        user: { lastName: '666', firstName: '666' },
                        //   slotProps:{ user: { lastName: "666",firstName: "666" }}
                    };
                },
                methods: {
                    submitFunction() {
                        alert(` data : \n ${JSON.stringify(this.user, null, '\t')}`)
                        // console.log('submitFunction : ', this.user);
                    }
                },
            });


            app.component('MyForm', {
                template: '#my-template',

                props: {
                    data: {
                        type: Object,
                        default() {
                            return {}
                        }
                    },
                },
                setup() { },
            });
            app.mount('#app');
        };
    </script>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5.16/dist/vue.global.min.js"></script>
</body>

</html>